<!--
 * @Author: lg
 * @Date: 2024-05-21 09:06:14
 * @LastEditors: lg
 * @LastEditTime: 2024-05-23 09:26:13
 * @Description: 
 * @FilePath: \bi-main\src\App.vue
-->
<template>
  <div id="sub-page">
    <router-view></router-view>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { provide } from 'vue';
provide('echarts', echarts);
</script>
<script>
export default {
  name: 'App',
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.setRem();
    });
    window.addEventListener('resize', this.setRem);
  },
  methods: {
    setRem() {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100; //转换的尺寸

      //设计师的尺寸
      var baseWidth = 1920;

      //浏览器缩放比例
      var t = window.devicePixelRatio || 1;

      //获取当前视口宽高 （*t实际作用为解决笔记本缩放问题，获取的实际为当前设备的实际像素）

      const clientWidth =
        (document.documentElement.clientWidth || window.innerWidth) * t;
      const clientHeight =
        (document.documentElement.clientHeight || window.innerHeight) * t;
      if (!clientWidth || !clientHeight) return;

      //比较宽高 以更小的比例为准去适配
      var rem = 100;

      if (clientWidth <= baseWidth) {
        rem = (clientWidth / 1920) * baseFontSize;
      } else {
        rem = (clientHeight / 1080) * baseFontSize;
      }
      document.querySelector('html').style.fontSize = rem + 'px';

      //解决缩放问题
      this.$nextTick(() => {
        let c = document.querySelector('body');
        c.style.zoom = 1 / t;
      });
    }
  }
};
</script>
<style lang="scss">
#sub-page {
  /* height: 100vh; */
  //   width: 100vw;
  height: 100%;
  width: 100%;
  // 设置整体字体样式和颜色
  font-size: 0.14rem;
  color: #4e5969;
}
/* .el-message--error {
  border-color: #F53F3F !important;
}
.el-message--success {
  border-color: #00B42A !important;
}
.el-message--warning {
  border-color: #f56c6c !important;
}
.el-message--info {
  border-color: #909399 !important;
} */
</style>
